<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="css/video.css">
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
	<button id="send">在 渲染进程中执行主进程里的方法（异步）</button>
	<button id="sendFeedback">在 渲染进程中执行主进程里的方法，并反馈给主进程（异步）</button>
	<button id="sendSync">渲染进程和主进程同步通信</button>
	
	
	
	<div class="box">
      <video id="video" width="400" height="300"></video>
      <canvas id="canvas"></canvas>
    </div>
    <button id="live">直播</button>
    <button id="snap">截图</button>
	<a href="index_opencv.html">opence_index</a>
	<a href="track_index.html">track_index.html</a>
	
	
	<script src="render/ipcRender.js"></script>
	<script>  
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');  
      var ctx = canvas.getContext('2d');  
      var width = video.width;  
      var height = video.height;  
      canvas.width = width;  
      canvas.height = height;   
      function liveVideo(){  
        var URL = window.URL || window.webkitURL;   // 获取到window.URL对象
        navigator.getUserMedia({  
          video: true  
        }, function(stream){  
          //video.src = URL.createObjectURL(stream);   // 将获取到的视频流对象转换为地址
          //video.play();   // 播放
		  
		video.srcObject = stream;
		// 当媒体头信息就绪，自动开始播放
		video.onloadedmetadata = () => video.play();
          //点击截图     
          document.getElementById("snap").addEventListener('click', function() {  
            ctx.drawImage(video, 0, 0, width, height);  
            var url = canvas.toDataURL('image/png');  
            document.getElementById('download').href = url;  
          });
        }, function(error){  
          console.log(error.name || error);  
        });  
      }  
      document.getElementById("live").addEventListener('click',function(){  
        liveVideo();  
      });    
    </script> 
  </body>
</html>
